<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>农资商城销售系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/admin/css/layui.css}">
    <link rel="stylesheet" th:href="@{/admin/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/admin/js/jquery-3.5.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/admin/lib/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/global.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/xadmin.js}"></script>
</head>
<body>


<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item" style="display: none;">
                <label for="id" class="layui-form-label">
                    <span class="x-red">*</span>ID</label>
                <div class="layui-input-inline">
                    <input type="text" id="id" name="id" lay-verify="required" disabled autocomplete="off"
                           class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label for="altname" class="layui-form-label">
                    <span class="x-red">*</span>名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="altname" name="altname" lay-verify="required" autocomplete="off"
                           class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <label for="imgurl" class="layui-form-label">
                    <span class="x-red">*</span>图片</label>
                <div class="layui-input-inline">
                    <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
                        <i class="layui-icon layui-icon-upload"></i>
                        <div>点击上传，或将文件拖拽到此处</div>
                        <div id="ID-upload-demo-preview">
                            <hr>
                            <img src="" id="imgurles" alt="上传成功后渲染" style="max-width: 100%;height: 100px;">
                        </div>
                    </div>
                    <input type="text" name="imgurl" id="imgurl" style="display: none">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="goodsid" class="layui-form-label">商品ID</label>
                <div class="layui-input-inline">
                    <input type="number" id="goodsid" name="goodsid" autocomplete="off"
                           class="layui-input"></div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-filter="update" lay-submit>修改</button>
            </div>
        </form>
    </div>
</div>
<script>layui.use(['form', 'layer', 'jquery', 'laydate', 'upload'],
    function () {
        $ = layui.jquery;
        var form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload;
        layer = layui.layer;

        upload.render({
            elem: '#ID-upload-demo-drag',
            url: '/upload/img', // 实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                layer.load();
            },
            done: function (res) {
                layer.closeAll('loading');
                if (res.code === 200) {
                    layer.msg('上传成功');
                    $('#ID-upload-demo-preview').removeClass('layui-hide')
                        .find('img').attr('src', res.msg);
                    $("#imgurl").val(res.msg);
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function () {
                layer.closeAll('loading');
                return layer.msg("网络繁忙，请稍后再试！！！");
            }
        });

        //监听提交
        form.on('submit(update)', function (data) {
            let goodsid = data.field.goodsid; // 获取库存
            if (goodsid) {
                let regexPattern = /^[1-9]\d*$/; // 正整数的正则表达式
                if (!regexPattern.test(goodsid)) { // 判断数字是否符合正则表达式
                    layer.msg("商品ID只能是正整数")
                    return false;
                }
            }
            $.post(prefix + '/banner/update', data.field, function (res) {
                if (res.code === 200) {
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 2000
                    }, function () {
                        //关闭当前frame
                        xadmin.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 2000
                    });
                }
            })
            return false;
        });

    });</script>
</body>

</html>